<template>
  <div class="space-add-page">
    <div class="page-container">
      <!-- 左侧表单区域 -->
      <div class="form-section">
        <div class="form-header">
          <h1 class="page-title">
            {{ route.query.id ? '修改' : '创建'
            }}{{ Number(route.query?.type) === 1 ? '团队空间' : '私人空间' }}
          </h1>
          <p class="page-subtitle">
            请填写以下信息来{{ route.query.id ? '修改' : '创建' }}您的空间
          </p>
        </div>

        <a-form
          :model="formState"
          layout="vertical"
          name="normal_submit"
          class="space-form"
          @finish="submitForm"
        >
          <a-form-item
            name="spaceName"
            label="空间名称"
            :rules="[{ required: true, message: '请输入空间名称!' }]"
          >
            <a-input
              v-model:value="formState.spaceName"
              placeholder="请输入空间名称"
              size="large"
            />
          </a-form-item>

          <a-form-item
            name="spaceLevel"
            label="空间级别"
            :rules="[{ required: true, message: '请选择空间级别！' }]"
          >
            <div class="level-select-wrapper">
              <a-select
                :options="SPACE_LEVEL_OPTIONS"
                v-model:value="formState.spaceLevel"
                placeholder="请选择空间级别"
                size="large"
                @change="initCountAndSize"
                style="width: 100%"
              />
              <a-tooltip v-if="formState.spaceLevel" title="查看空间详情" placement="right">
                <a-button type="text" @click="showLevelDetail = true" class="detail-button">
                  <InfoCircleOutlined />
                </a-button>
              </a-tooltip>
            </div>
          </a-form-item>

          <a-form-item>
            <a-button
              block
              type="primary"
              html-type="submit"
              size="large"
              :loading="loading"
              class="submit-button"
            >
              {{ route.query.id ? '保存修改' : '创建空间' }}
            </a-button>
          </a-form-item>
        </a-form>
      </div>

      <!-- 右侧介绍区域 -->
      <div class="info-section">
        <a-card class="level-card" title="空间级别介绍">
          <template #extra>
            <a-tag color="blue">当前仅支持普通版</a-tag>
          </template>

          <a-typography-paragraph class="upgrade-info">
            如需升级更高级别，请联系
            <a href="#" class="contact-link">鹿七</a>
          </a-typography-paragraph>

          <div class="level-list">
            <div
              v-for="item in spaceLevelList"
              :key="item.name"
              class="level-item"
              :class="{ 'is-current': item.level === formState.spaceLevel }"
            >
              <div class="level-icon">
                <SketchOutlined v-if="item.level === SPACE_LEVEL_ENUM.FLAGSHIP" />
              </div>
              <div class="level-info">
                <div class="level-name">{{ item.name }}</div>
                <div class="level-details">
                  <span class="count">{{ item.maxCount }}张</span>
                  <span class="size">{{ formatSize(item.maxSize) }}</span>
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </div>
    </div>

    <!-- 空间详情弹窗 -->
    <a-modal
      v-model:open="showLevelDetail"
      title="空间详情"
      :footer="null"
      width="400px"
      @cancel="showLevelDetail = false"
    >
      <div class="level-detail-content">
        <div class="detail-item">
          <span class="label">空间名称：</span>
          <span class="value">{{ formState.spaceName }}</span>
        </div>
        <div class="detail-item">
          <span class="label">空间级别：</span>
          <span class="value">{{ getLevelName(formState.spaceLevel) }}</span>
        </div>
        <div class="detail-item">
          <span class="label">最大图片数量：</span>
          <span class="value">{{ formState.maxCount }}张</span>
        </div>
        <div class="detail-item">
          <span class="label">最大存储容量：</span>
          <span class="value">{{ formatSize(formState.maxSize) }}</span>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {
  addSpaceUsingPost,
  getSpaceByIdUsingGet,
  listSpaceLevelUsingGet,
  updateSpaceUsingPost,
} from '@/api/spaceController.ts'
import { useRoute, useRouter } from 'vue-router'
import { SPACE_LEVEL_ENUM, SPACE_LEVEL_OPTIONS } from '@/constants/level.ts'
import { InfoCircleOutlined, SketchOutlined } from '@ant-design/icons-vue'
import { formatSize } from '@/utils'

const route = useRoute()
const router = useRouter()

// 定义表单
const formState = ref<API.SpaceUpdateRequest>({})
const loading = ref(false)
const showLevelDetail = ref(false)

// 获取级别名称
const getLevelName = (level: number) => {
  const option = SPACE_LEVEL_OPTIONS.find((item) => item.value === level)
  return option?.label || '-'
}

const submitForm = async (values) => {
  loading.value = true
  let res
  const id = route.query.id
  if (id) {
    //   更新
    res = await updateSpaceUsingPost({
      ...values,
      id: id,
      spaceType: route.query?.type,
    })
  } else {
    res = await addSpaceUsingPost({
      ...values,
      spaceType: route.query?.type,
    })
  }
  if (res.data.code != 0) {
    return
  }
  loading.value = false
  router.replace({
    path: '/admin/space-manage',
  })
}

// 获取空间等级信息
const spaceLevelList = ref<API.SpaceLevel[]>([])

const getSpaceLevelInfo = async () => {
  const res = await listSpaceLevelUsingGet()
  if (res.data.code != 0) {
    return
  }
  spaceLevelList.value = res.data.data
}

// 初始化大小
const initCountAndSize = (value) => {
  console.log(value)
  const level = spaceLevelList.value.find((item) => item.level === value)
  formState.value.maxCount = level.maxCount
  formState.value.maxSize = level.maxSize
}

// 获取空间信息
const getSpace = async () => {
  let id = route.query.id
  if (!id) {
    return
  }
  console.log(id)
  const res = await getSpaceByIdUsingGet({
    id: id,
  })
  if (res.data.code === 0 && res.data.data) {
    formState.value = res.data.data
  }
}

onMounted(() => {
  getSpaceLevelInfo()
  getSpace()
})
</script>

<style scoped lang="scss">
.space-add-page {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 24px;

  .page-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;

    @media (max-width: 1024px) {
      grid-template-columns: 1fr;
    }
  }

  .form-section {
    background: #fff;
    padding: 32px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

    .form-header {
      margin-bottom: 32px;

      .page-title {
        font-size: 28px;
        font-weight: 600;
        color: #1f1f1f;
        margin: 0 0 8px;
      }

      .page-subtitle {
        color: #666;
        font-size: 16px;
        margin: 0;
      }
    }

    .space-form {
      :deep(.ant-form-item-label) {
        font-weight: 500;
      }

      .level-select-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;

        .detail-button {
          padding: 4px;
          height: 40px;
          width: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          color: #1890ff;
        }
      }

      .submit-button {
        height: 48px;
        font-size: 16px;
        margin-top: 24px;
      }
    }
  }

  .info-section {
    .level-card {
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

      :deep(.ant-card-head) {
        border-bottom: 1px solid #f0f0f0;
        padding: 16px 24px;
      }

      :deep(.ant-card-body) {
        padding: 24px;
      }

      .upgrade-info {
        color: #666;
        margin-bottom: 24px;
      }

      .contact-link {
        color: #1890ff;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }

      .level-list {
        display: flex;
        flex-direction: column;
        gap: 16px;

        .level-item {
          display: flex;
          align-items: center;
          gap: 16px;
          padding: 16px;
          border-radius: 8px;
          background: #f8f9fa;
          transition: all 0.3s ease;

          &.is-current {
            background: #e6f7ff;
            border: 1px solid #91d5ff;
          }

          .level-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            border-radius: 8px;
            font-size: 20px;
            color: #1890ff;
          }

          .level-info {
            flex: 1;

            .level-name {
              font-weight: 500;
              margin-bottom: 4px;
            }

            .level-details {
              display: flex;
              gap: 16px;
              color: #666;
              font-size: 14px;

              .count,
              .size {
                display: flex;
                align-items: center;
                gap: 4px;
              }
            }
          }
        }
      }
    }
  }
}

// 空间详情弹窗样式
.level-detail-content {
  .detail-item {
    display: flex;
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      width: 120px;
      color: #666;
    }

    .value {
      flex: 1;
      color: #1f1f1f;
      font-weight: 500;
    }
  }
}

// 响应式优化
@media screen and (max-width: 768px) {
  .space-add-page {
    padding: 16px;

    .page-container {
      gap: 16px;
    }

    .form-section {
      padding: 24px;

      .form-header {
        margin-bottom: 24px;

        .page-title {
          font-size: 24px;
        }
      }
    }
  }
}
</style>
